<template>
  <div>
    <div>
      <el-button size="small" type="primary" @click="add">新增规格</el-button>
    </div>
    <div
      class="wrap"
      style="border-bottom: none"
      v-if="form.model.paramsList && form.model.paramsList.length != 0"
    >
      <div class="left">规格名称：</div>
      <div class="right">规格值：</div>
      <div class="delet"></div>
    </div>
    <div class="www">
      <div
        v-for="(item, index) in form.model.paramsList"
        :key="index"
        class="wrap"
      >
        <div class="left">
          {{ index + 1 }}、
          <el-input v-model="item.key" class="max-w460"></el-input>
        </div>
        <div class="right">
          <el-input v-model="item.value" class="max-w460"></el-input>
        </div>
        <div class="delet" @click="sc(item, index)">删除</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  inject: ["form"],
  methods: {
    add() {
      this.form.model.paramsList.push({
        key: "",
        value: "",
      });
    },
    sc(item, index) {
      this.form.model.paramsList.splice(index, 1);
    },
  },
};
</script>
<style scoped lang="scss">
.www {
  max-height: 500px;
  overflow-y: scroll;
  // background: #a6a6a6;
  margin-top: 20px;
}
.wrap {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #a6a6a6;
  width: 80%;
  margin: 0 auto;
  .delet {
    color: red;
    font-size: 16px;
    cursor: pointer;
  }
  .left {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right {
    width: 15%;
  }
}
</style>
